<template>
  <div class="house_number_manage">
    <van-nav-bar
      title="户号管理"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="lifepay_devide_info">
      <div
        class="devide_content"
        v-for="option in feeTypeList"
        :key="option.id"
      >
        <div class="devide_sub_title">
          <span>{{ option.groupName }}</span>
        </div>
        <div class="devide_sub_icon">
          <svg-icon
            icon-class="edit"
            widthW="1.5em"
            heightH="1.5em"
            @click.native="handleEdit(option)"
          ></svg-icon>
        </div>
        <div class="devide_sub_icon">
          <svg-icon
            icon-class="我的快递-删除"
            widthW="1.5em"
            heightH="1.5em"
            @click.native="handleDelete(option)"
          ></svg-icon>
        </div>
        <ul>
          <li
            v-for="item in option.groupItems"
            :key="item.id"
            class="payment_list"
          >
            <div class="payment_info">
              <span>{{ item.itemName ? item.itemName : "未知" }}</span>
              <div class="payment_sub_info">
                {{ option.houseCode }}
              </div>
            </div>
            <div class="payemnt_right_icon" style="margin-right:30px">
              <svg-icon
                icon-class="edit"
                widthW="1.2em"
                heightH="1.2em"
                @click.native="handleEditItem(item)"
              ></svg-icon>
            </div>
            <div class="payemnt_right_icon">
              <svg-icon
                icon-class="我的快递-删除"
                widthW="1.2em"
                heightH="1.2em"
                @click.native="handleDeleteItem(item)"
              ></svg-icon>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="devide_div"></div>
    <van-button type="default" icon="plus" block @click="createGroup"
      >新增分组</van-button
    >
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
    <van-dialog
      v-model="show"
      title="请输入新的分组名"
      show-cancel-button
      @confirm="confirmModify"
    >
      <van-field v-model="groupName" :placeholder="oldGrouName" />
    </van-dialog>
    <van-dialog
      v-model="showCreateDialog"
      title="请输入新的分组名"
      show-cancel-button
      @confirm="confirmCreate"
    >
      <van-field v-model="newGroupName" placeholder="请输入分组名" />
      <van-field v-model="houseCode" placeholder="请输入户号" />
    </van-dialog>
  </div>
</template>

<script>
import smartProperty from "@/controller/smartProperty.js";
import constant from "@/controller/constant.js";
import { Dialog } from "vant";
export default {
  data() {
    return {
      showLoading: true,
      show: false,
      showCreateDialog: false,
      oldGrouName: "",
      groupName: "",
      newGroupName: "",
      feeTypeList: [],
      groupId: null,
      houseCode: ''
    };
  },
  mounted() {
    this.getGroupPayList();
  },
  methods: {
    confirmCreate() {
      this.showLoading = true;
      const data = {
        groupName: this.newGroupName,
        houseCode: Number(this.houseCode)
      };
      smartProperty
        .community_payment_group_create(data)
        .then(res => {
          if (res.code === "0") {
            this.$toast("创建成功");
            this.showCreateDialog = false;
            this.getGroupPayList();
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    createGroup() {
      this.showCreateDialog = true;
    },
    getGroupPayList() {
      smartProperty
        .community_payment_group_list({})
        .then(res => {
          if (res.code === "0") {
            this.feeTypeList = res.datas;
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    deleteGroup(id) {
      this.showLoading = true;
      smartProperty
        .community_payment_group_delete(id)
        .then(res => {
          if (res.code === "0") {
            this.$toast("删除成功！");
            this.getGroupPayList();
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    handleDelete(val) {
      Dialog.confirm({
        title: "提示",
        message: `确认删除当前分组？删除不可恢复！`
      })
        .then(() => {
          this.deleteGroup(val.id);
        })
        .catch(() => {});
    },
    handleEdit(val) {
      this.show = true;
      this.oldGrouName = val.groupName;
      this.groupId = val.id;
    },
    modifyGroupName(data) {
      this.showLoading = true;
      smartProperty
        .community_payment_group_modify(data)
        .then(res => {
          if (res.code === "0") {
            this.$toast("修改成功！");
            this.getGroupPayList();
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    confirmModify() {
      if (this.groupName) {
        const data = {
          id: this.groupId,
          groupName: this.groupName
        };
        this.modifyGroupName(data);
      } else {
        this.$toast("新的分组名不能为空");
        return;
      }
      this.show = false;
    },
    handleEditItem(val) {
      this.$router.push({ name: "immediatePay", query: val });
    },
    deleteGroupItem(id) {
      this.showLoading = true;
      smartProperty
        .community_payment_group_item_delete(id)
        .then(res => {
          if (res.code === "0") {
            this.$toast("删除成功！");
            this.getGroupPayList();
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    handleDeleteItem(val) {
      Dialog.confirm({
        title: "提示",
        message: `确认删除当前缴费项?`
      })
        .then(() => {
          this.deleteGroupItem(val.id);
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/workstation.scss";

.house_number_manage {
  background: #ffffff;
  height: 100%;
  .function_text {
    margin-top: 8px;
    color: #666666;
    font-size: 14px;
  }

  .payment_list {
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    width: 280px;
    border-bottom: 1px solid #edeff2;

    .payemnt_left_icon {
      width: 20px;
      float: left;
      margin-top: 8px;
    }

    .payemnt_right_icon {
      width: 20px;
      position: absolute;
      right: 20px;
      margin-top: 16px;
    }

    .payment_info {
      float: right;
      margin-left: 11.5px;

      .payment_sub_info {
        font-size: 12px;
        color: #999999;
        margin-top: 5px;
        line-height: 16.5px;
      }

      span {
        font-size: 16px;
        color: #333333;
        line-height: 22.5px;
      }
    }
  }

  .payment_list:last-child {
    border: none;
  }

  .devide_content {
    display: flex;
    flex-wrap: wrap;
    padding: 14.5px 0 0 15px;
  }

  .devide_sub_title {
    width: 300px;
    font-size: 14px;
    float: left;
    color: #666666;

    span {
      line-height: 20px;
    }
  }

  .devide_sub_icon {
    width: 17.5px;
    float: right;
    margin-top: 4.25px;
    margin-right: 10px;
  }
}
</style>
